const SERVER = 'http://localhost'
const App = {
    el: "#app",
    data: {
        username: '',
        iframeStyle: {
            width: '100%',
            height: '800px',
            border: 'none'
        },
        current: 'designer',
        processList: [],
        taskList: [],
        historyList: [],
        myApplyList: [],
        myApplyVars: null,
        checkedProcess: '',
        checkedTask: '',
        checkedApply: '',
        params: {
            audit: '',
            comment: ''
        },
        diagramSVG: ''
    },
    computed: {

    },
    watch: {
        current() {
            this.checkedProcess = ''
            this.checkedTask = ''
            this.params = {}
            this.clearApply()
        }
    },
    mounted() {
        this.iframeStyle.height = window.innerHeight - 90 + 'px';
        this.getUsername()
        this.getProcessList()
    },
    methods: {
        logout() {
            location.href = `${SERVER}/logout`;
        },
        getUsername() {
            fetch(`${SERVER}/act/username`).then(res => res.text()).then(data => this.username = data)
        },
        // 流程
        getProcessList() {
            this.current = 'process'
            fetch(`${SERVER}/act/process/list`).then(res => res.json()).then(data => this.processList = data)
        },
        startProcess() {
            if (!this.checkedProcess) {
                Swal.fire('未选择流程定义')
                return;
            }
            fetch(`${SERVER}/act/process/startById/${this.checkedProcess}`, {
                method: 'POST'
            }).then(res => {
                if (res.ok) {
                    Swal.fire('启动流程成功')
                } else {
                    res.json().then(err => Swal.fire('启动流程失败:' + err.message))
                }
            })
        },
        getMyApplyList() {
            this.current = 'myApply'
            fetch(`${SERVER}/act/process/myApply`).then(res => res.json()).then(data => this.myApplyList = data)
        },
        clearApply(instanceId) {
            this.diagramSVG = ''
            this.myApplyVars = null
            this.checkedApply = instanceId
        },
        showDiagram(instanceId) {
            this.clearApply(instanceId)
            fetch(`${SERVER}/act/process/getInstanceDiagram/${instanceId}`).then(res => {
                if (res.ok) {
                    res.text().then(svg => this.diagramSVG = svg)
                } else {
                    Swal.fire('操作失败')
                }
            })
        },
        showVariable(instanceId) {
            this.clearApply(instanceId)
            fetch(`${SERVER}/act/process/getInstanceVariable/${instanceId}`).then(res => {
                if (res.ok) {
                    res.json().then(json => this.myApplyVars = json)
                } else {
                    Swal.fire('操作失败')
                }
            })
        },
        editDiagram() {
            if (!this.checkedProcess) {
                Swal.fire('未选择流程定义')
                return;
            }
            fetch(`${SERVER}/act/process/getXmlById/${this.checkedProcess}`).then(res => {
                if (res.ok) {
                    res.text().then(xml => {
                        document.getElementsByTagName('iframe')[0].contentWindow.openDiagram(xml)
                        this.current = 'designer'
                    })
                } else {
                    Swal.fire('操作失败')
                }
            })
        },
        async deleteDeployment() {
            if (!this.checkedProcess) {
                Swal.fire('未选择流程定义')
                return;
            }
            let ok = await Swal.fire({
                type: 'warning',
                showCancelButton: true,
                title: '将删除所有相关数据!',
            })
            if (!ok.value) {
                return;
            }
            let index = this.processList.findIndex(item => item.id === this.checkedProcess);
            let deploymentId = this.processList[index].deploymentId;
            fetch(`${SERVER}/act/deployment/deleteById/${deploymentId}`, {
                method: 'POST'
            }).then(res => {
                if (res.ok) {
                    Swal.fire('操作成功')
                    this.getProcessList()
                } else {
                    res.json().then(err => Swal.fire('删除流程失败:' + err.message))
                }
            })
        },
        // 任务
        getTaskList() {
            this.current = 'task'
            this.checkedTask = ''
            this.params = {}
            fetch(`${SERVER}/act/task/list`).then(res => res.json()).then(data => this.taskList = data)
        },
        completeTask() {
            if (!this.checkedTask) {
                Swal.fire('未选择任务')
                return;
            }
            let data = new FormData();
            for (let k in this.params) {
                data.append(k, this.params[k])
            }
            fetch(`${SERVER}/act/task/complete/${this.checkedTask}`, {
                method: 'POST',
                body: data
            }).then(res => {
                if (res.ok) {
                    Swal.fire('操作成功')
                    this.getTaskList()
                } else {
                    res.json().then(err => Swal.fire('完成任务失败:' + err.message))
                }
            })
        },
        getHistoryList() {
            this.current = 'history'
            fetch(`${SERVER}/act/task/history`).then(res => res.json()).then(data => this.historyList = data)
        },
    }
}